<template>
  <div id="setting">
    <img src="../../../public//images/位图.png" />
    <div class="content">
      <div>{{ `天地图API Token：${formData.token ? '已设置' : '未设置'}` }}</div>
      <div>针对企业主体设置天地图API Token</div>
    </div>
    <el-button type="primary" @click="onSetting">设置</el-button>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="天地图API TOKEN设置"
    :width="700"
    :append-to-body="false"
    :close-on-click-modal="false"
    @close="handleClose"
    custom-class="center-detail"
  >
    <JLForm
      ref="formRef"
      :form-config="formConfig"
      :form-data="formData"
      :form-item-config="formItemConfig"
    >
      <template #slotToken>
        <el-input v-model="formData.token" placeholder="请设置token" :clearable="true" />
      </template>
      <template #slotLink>
        <a href="https://uums.tianditu.gov.cn/register" target="_blank">天地图Token获取地址</a>
      </template>
    </JLForm>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#0560FD" type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { JLForm } from '@jl/element-plus';
import { create } from './composables/create';
import { getMapWorldToken, editOrAddToken } from '@/api/setting/index';
import { useRequest } from '@jl/common/composable';
import { ElMessage } from 'element-plus';

defineOptions({
  name: '',
});

const { formRef, formConfig, formData, formItemConfig } = create();
const dialogVisible = ref(false);

const { run: searchToken, data } = useRequest<any, any>(getMapWorldToken, {});

const init = async () => {
  try {
    await searchToken();
    if (data.value?.token) {
      formData.value.token = data.value.token;
    }
  } catch (error) {}
};

onMounted(() => {
  init();
});

const onSetting = () => {
  dialogVisible.value = true;
};

const handleClose = () => {
  dialogVisible.value = false;
};

const submit = () => {
  formRef.value?.getInstance().validate((valid, fields) => {
    if (valid) {
      const fData = new FormData();
      fData.set('token', formData.value.token);
      const param = {
        params: { token: formData.value.token },
      };
      editOrAddToken(param).then((res: any) => {
        ElMessage.info('操作成功');
        handleClose();
      });
    }
  });
};
</script>

<style lang="less" scoped>
#setting {
  display: flex;
  align-items: center;
  margin: 20px 0 20px;
  padding: 20px;
  background: #f4f4f4;
  border-radius: 8px;
  flex-direction: row;
  height: auto;

  .content {
    margin-left: 20px;

    div:first-of-type {
      font-size: 18px;
      height: 25px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #353535;
      line-height: 25px;
      margin-bottom: 9px;
    }
    div {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 20px;
      height: 20px;
      color: #9a9a9a;
    }
  }

  .el-button {
    width: 96px;
    margin-left: auto;
  }
}
</style>
